<template>
    <view class="container">
        <!-- 引导页面 -->
        <view class="welcome-page" v-if="currentStep === 0">
            <view class="welcome-content">
                <image class="welcome-logo" src="/static/hhh.jpg" mode="aspectFit" alt="智能学习搭子logo"></image>
                <h1 class="welcome-title">AI学伴</h1>
                <p class="welcome-desc">让我更好地了解你，为你提供个性化的学习陪伴服务</p>
                <button class="start-btn" @click="currentStep = 1">开始填写信息</button>
            </view>
        </view>

        <!-- 信息填写主界面 -->
        <view class="info-container" v-else>
            <!-- 顶部标题栏 -->
            <view class="top-bar">
                <text class="title">AI学伴</text>
                <view class="right-icons">
                    <uni-icons type="ellipsis" size="24" color="#333"></uni-icons>
                    <uni-icons type="sunny" size="24" color="#333" class="theme-icon"></uni-icons>
                </view>
            </view>
            
            <!-- 进度指示器 -->
            <view class="progress-indicator new-style">
                <view class="step-labels">
                    <text v-for="(step, index) in steps" :key="index" 
                          :class="['step-label', 
                                   index < currentStep ? 'completed' : '',
                                   index === currentStep ? 'active' : '']">
                        {{step}}
                    </text>
                </view>
                <view class="step-dividers">
                    <view v-for="(step, index) in steps.length - 1" :key="index" 
                          :class="['divider', index < currentStep - 1 ? 'completed' : '']"></view>
                </view>
            </view>

            <!-- 表单内容 -->
            <scroll-view class="form-content" scroll-y="true" :scroll-with-animation="true">
                <!-- 第一步：基础信息 -->
                <view v-if="currentStep === 1" class="form-step">
                    <view class="step-header">
                        <h2>基础信息</h2>
                        <p>让我们先认识一下吧</p>
                    </view>

                    <view class="form-group">
                        <label>姓名 <span class="required">*</span></label>
                        <input type="text" v-model="userInfo.name" placeholder="请输入真实姓名"
                               :class="{'error': errors.name}" @input="clearFieldError('name')" />
                        <text class="error-msg" v-if="errors.name">{{errors.name}}</text>
                    </view>

                    <view class="form-group">
                        <label>性别 <span class="required">*</span></label>
                        <view class="gender-options new-style">
                            <view v-for="(gender, index) in genderOptions" :key="index"
                                  :class="['gender-option', userInfo.gender === gender.value ? 'selected' : '']"
                                  @click="selectGender(gender.value)">
                                <text>{{gender.label}}</text>
                            </view>
                        </view>
                        <text class="error-msg" v-if="errors.gender">{{errors.gender}}</text>
                    </view>

                    <view class="form-group">
                        <label>年龄 <span class="required">*</span></label>
                        <input type="number" v-model.number="userInfo.age" placeholder="请输入年龄"
                               :class="{'error': errors.age}" @input="clearFieldError('age')" />
                        <text class="error-msg" v-if="errors.age">{{errors.age}}</text>
                    </view>
                </view>

                <!-- 第二步：教育背景 -->
                <view v-if="currentStep === 2" class="form-step">
                    <view class="step-header">
                        <h2>教育背景</h2>
                        <p>告诉我你的学习情况</p>
                    </view>

                    <view class="form-group">
                        <label>学校 <span class="required">*</span></label>
                        <input type="text" v-model="userInfo.school" placeholder="请输入学校名称"
                               :class="{'error': errors.school}" @input="clearFieldError('school')" />
                        <text class="error-msg" v-if="errors.school">{{errors.school}}</text>
                    </view>

                    <view class="form-group">
                        <label>专业 <span class="required">*</span></label>
                        <input type="text" v-model="userInfo.major" placeholder="请输入专业名称"
                               :class="{'error': errors.major}" @input="clearFieldError('major')" />
                        <text class="error-msg" v-if="errors.major">{{errors.major}}</text>
                    </view>

                    <view class="form-group">
                        <label>年级 <span class="required">*</span></label>
                        <picker @change="bindGradeChange" :value="gradeIndex" :range="gradeOptions">
                            <view :class="['picker', userInfo.grade ? '' : 'placeholder', errors.grade ? 'error' : '']">
                                {{userInfo.grade || '请选择年级'}}
                            </view>
                        </picker>
                        <text class="error-msg" v-if="errors.grade">{{errors.grade}}</text>
                    </view>
                </view>

                <!-- 第三步：学习情况 -->
                <view v-if="currentStep === 3" class="form-step">
                    <view class="step-header">
                        <h2>学习情况</h2>
                        <p>了解你的学习需求和习惯</p>
                    </view>

                    <view class="form-group">
                        <label>当前学习课程 <span class="required">*</span></label>
                        <view class="tags-input" :class="{'error': errors.courses}">
                            <view class="selected-tags">
                                <view v-for="(course, index) in userInfo.courses" :key="index" class="tag">
                                    <text>{{course}}</text>
                                    <uni-icons type="close" size="12" @click="removeCourse(index)"></uni-icons>
                                </view>
                            </view>
                            <input type="text" v-model="courseInput" placeholder="输入课程后按回车添加"
                                   @confirm="addCourse" class="course-input" />
                            <text class="error-msg" v-if="errors.courses">{{errors.courses}}</text>
                            <text class="hint-text">例如：高等数学、英语、程序设计等</text>
                        </view>
                    </view>

                    <view class="form-group">
                        <label>学习目标</label>
                        <textarea v-model="userInfo.learningGoal" placeholder="例如：通过英语四级考试、考研数学140分、掌握编程技能等"
                                  maxlength="200" auto-height class="learning-goal-textarea" />
                        <text class="char-count">{{userInfo.learningGoal.length}}/200</text>
                    </view>

                    <view class="form-group">
                        <label>每日可用学习时间 <span class="required">*</span></label>
                        <picker @change="bindTimeChange" :value="timeIndex" :range="timeOptions">
                            <view :class="['picker', userInfo.studyTime ? '' : 'placeholder', errors.studyTime ? 'error' : '']">
                                {{userInfo.studyTime || '请选择学习时间'}}
                            </view>
                        </picker>
                        <text class="error-msg" v-if="errors.studyTime">{{errors.studyTime}}</text>
                    </view>

                    <view class="form-group">
                        <label>学习困难领域</label>
                        <view class="checkbox-group">
                            <view v-for="(difficulty, index) in difficultyOptions" :key="index" class="checkbox-item">
                                <label class="checkbox-label">
                                    <checkbox :value="difficulty.value" :checked="userInfo.difficulties.includes(difficulty.value)"
                                              @change="toggleDifficulty(difficulty.value)" />
                                    <text>{{difficulty.label}}</text>
                                </label>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 第四步：学习偏好 -->
                <view v-if="currentStep === 4" class="form-step">
                    <view class="step-header">
                        <h2>学习偏好</h2>
                        <p>选择适合你的学习方式</p>
                    </view>

                    <view class="form-group">
                        <label>学习风格偏好 <span class="required">*</span></label>
                        <view class="preference-grid">
                            <view v-for="(style, index) in styleOptions" :key="index"
                                  :class="['preference-item', userInfo.learningStyle === style.value ? 'selected' : '']"
                                  @click="userInfo.learningStyle = style.value">
                                <uni-icons :type="style.icon" size="24"></uni-icons>
                                <text class="preference-label">{{style.label}}</text>
                                <text class="preference-desc">{{style.desc}}</text>
                            </view>
                        </view>
                        <text class="error-msg" v-if="errors.learningStyle">{{errors.learningStyle}}</text>
                    </view>

                    <view class="form-group">
                        <label>偏好的学习时间段</label>
                        <view class="time-slots">
                            <view v-for="(slot, index) in timeSlotOptions" :key="index"
                                  :class="['time-slot', userInfo.preferredTime.includes(slot.value) ? 'selected' : '']"
                                  @click="toggleTimeSlot(slot.value)">
                                <text>{{slot.label}}</text>
                            </view>
                        </view>
                    </view>

                    <view class="form-group">
                        <label>希望的学习陪伴方式</label>
                        <view class="checkbox-group">
                            <view v-for="(companion, index) in companionOptions" :key="index" class="checkbox-item">
                                <label class="checkbox-label">
                                    <checkbox :value="companion.value" :checked="userInfo.companionWays.includes(companion.value)"
                                              @change="toggleCompanion(companion.value)" />
                                    <text>{{companion.label}}</text>
                                </label>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>

            <!-- 导航按钮 -->
			<view class="form-nav new-style">
				<button class="nav-btn prev" @click="prevStep" v-if="currentStep > 1">上一步</button>
				<button class="nav-btn next primary" @click="nextStep" v-if="currentStep < 4">
					{{currentStep === 3 ? '完成' : '下一步'}}
				</button>
				<button class="nav-btn submit primary" @click="submitInfo" v-if="currentStep === 4">完成注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentStep: 0,
				steps: ['欢迎', '基础信息', '教育背景', '学习情况', '学习偏好'],
				courseInput: '',
				gradeIndex: -1,
				timeIndex: -1,
				genderOptions: [
					{ value: 'male', label: '男', icon: 'male' },
					{ value: 'female', label: '女', icon: 'female' },
					{ value: 'other', label: '其他', icon: 'person' }
				],
				gradeOptions: ['大一', '大二', '大三', '大四', '研究生', '博士生', '其他'],
				timeOptions: ['1小时以下', '1-2小时', '2-4小时', '4-6小时', '6小时以上'],
				difficultyOptions: [
					{ value: 'concentration', label: '注意力不集中' },
					{ value: 'planning', label: '学习计划制定' },
					{ value: 'persistence', label: '学习坚持困难' },
					{ value: 'efficiency', label: '学习效率低下' },
					{ value: 'review', label: '知识复习困难' },
					{ value: 'motivation', label: '学习动力不足' }
				],
				styleOptions: [
					{ value: 'visual', label: '视觉型', icon: 'eye', desc: '喜欢看图、图表、视频' },
					{ value: 'auditory', label: '听觉型', icon: 'sound', desc: '喜欢听讲解、音频' },
					{ value: 'kinesthetic', label: '动手型', icon: 'hand', desc: '喜欢实践、操作' },
					{ value: 'reading', label: '阅读型', icon: 'book', desc: '喜欢阅读文字材料' }
				],
				timeSlotOptions: [
					{ value: 'morning', label: '早晨(6-12点)' },
					{ value: 'afternoon', label: '下午(12-18点)' },
					{ value: 'evening', label: '晚上(18-24点)' },
					{ value: 'night', label: '深夜(0-6点)' }
				],
				companionOptions: [
					{ value: 'reminder', label: '学习提醒' },
					{ value: 'plan', label: '计划制定' },
					{ value: 'qna', label: '问答解惑' },
					{ value: 'encourage', label: '鼓励陪伴' },
					{ value: 'progress', label: '进度跟踪' }
				],
				userInfo: {
					name: '',
					gender: '',
					age: null,
					school: '',
					major: '',
					grade: '',
					courses: [],
					learningGoal: '',
					studyTime: '',
					difficulties: [],
					learningStyle: '',
					preferredTime: [],
					companionWays: ['reminder', 'qna']
				},
				errors: {}
			};
		},
		computed: {
			progressWidth() {
				if (this.steps.length <= 2) return '0%';
				return ((this.currentStep - 1) / (this.steps.length - 2)) * 100 + '%';
			}
		},
		methods: {
			selectGender(gender) {
				this.userInfo.gender = gender;
				if (this.errors.gender) {
					this.errors.gender = '';
				}
			},
			getSelectedGenderLabel() {
				const selected = this.genderOptions.find(option => option.value === this.userInfo.gender);
				return selected ? selected.label : '';
			},
			getSelectedGenderIcon() {
				const selected = this.genderOptions.find(option => option.value === this.userInfo.gender);
				return selected ? selected.icon : 'person';
			},
			nextStep() {
				if (this.validateStep()) {
					if (this.currentStep < 4) {
						this.currentStep++;
						this.$nextTick(() => {
							uni.pageScrollTo({
								scrollTop: 0,
								duration: 300
							});
						});
					} else {
						this.submitInfo();
					}
				}
			},
			prevStep() {
				if (this.currentStep > 1) {
					this.currentStep--;
					this.clearErrors();
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 300
						});
					});
				}
			},
			validateStep() {
				this.clearErrors();
				let isValid = true;

				switch (this.currentStep) {
					case 1:
						if (!this.userInfo.name) {
							this.errors.name = '请输入姓名';
							isValid = false;
						}
						if (!this.userInfo.gender) {
							this.errors.gender = '请选择性别';
							isValid = false;
						}
						if (this.userInfo.age === null || this.userInfo.age < 1 || this.userInfo.age > 100) {
							this.errors.age = '请输入1-100之间的有效年龄';
							isValid = false;
						}
						break;
					case 2:
						if (!this.userInfo.school) {
							this.errors.school = '请输入学校名称';
							isValid = false;
						}
						if (!this.userInfo.major) {
							this.errors.major = '请输入专业名称';
							isValid = false;
						}
						if (!this.userInfo.grade) {
							this.errors.grade = '请选择年级';
							isValid = false;
						}
						break;
					case 3:
						if (this.userInfo.courses.length === 0) {
							this.errors.courses = '请添加至少一门课程';
							isValid = false;
						}
						if (!this.userInfo.studyTime) {
							this.errors.studyTime = '请选择学习时间';
							isValid = false;
						}
						break;
					case 4:
						if (!this.userInfo.learningStyle) {
							this.errors.learningStyle = '请选择学习风格';
							isValid = false;
						}
						break;
				}
				
				if (!isValid) {
					this.scrollToFirstError();
				}
				
				return isValid;
			},
			clearErrors() {
				this.errors = {};
			},
			clearFieldError(field) {
				if (this.errors[field]) {
					this.errors[field] = '';
				}
			},
			bindGradeChange(e) {
				this.gradeIndex = e.detail.value;
				this.userInfo.grade = this.gradeOptions[this.gradeIndex];
				if (this.errors.grade) {
					this.errors.grade = '';
				}
			},
			bindTimeChange(e) {
				this.timeIndex = e.detail.value;
				this.userInfo.studyTime = this.timeOptions[this.timeIndex];
				if (this.errors.studyTime) {
					this.errors.studyTime = '';
				}
			},
			addCourse() {
				if (this.courseInput.trim() && this.userInfo.courses.length < 10) {
					this.userInfo.courses.push(this.courseInput.trim());
					this.courseInput = '';
					if (this.errors.courses) {
						this.errors.courses = '';
					}
				}
			},
			removeCourse(index) {
				this.userInfo.courses.splice(index, 1);
			},
			toggleDifficulty(difficulty) {
				const index = this.userInfo.difficulties.indexOf(difficulty);
				if (index > -1) {
					this.userInfo.difficulties.splice(index, 1);
				} else {
					this.userInfo.difficulties.push(difficulty);
				}
			},
			toggleTimeSlot(slot) {
				const index = this.userInfo.preferredTime.indexOf(slot);
				if (index > -1) {
					this.userInfo.preferredTime.splice(index, 1);
				} else {
					this.userInfo.preferredTime.push(slot);
				}
			},
			toggleCompanion(companion) {
				const index = this.userInfo.companionWays.indexOf(companion);
				if (index > -1) {
					this.userInfo.companionWays.splice(index, 1);
				} else {
					this.userInfo.companionWays.push(companion);
				}
			},
			async submitInfo() {
				if (this.validateStep()) {
					try {
						uni.setStorageSync('userInfo', this.userInfo);
						
						uni.showToast({
							title: '信息保存成功',
							icon: 'success'
						});

						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/chat/chat'
							});
						}, 2000);
					} catch (e) {
						console.error('保存用户信息失败:', e);
						uni.showToast({
							title: '保存失败，请重试',
							icon: 'none'
						});
					}
				}
			},
			scrollToFirstError() {
				this.$nextTick(() => {
					const errorElement = document.querySelector('.error, .error-msg');
					if (errorElement) {
						errorElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
						errorElement.classList.add('error-highlight');
						setTimeout(() => {
							errorElement.classList.remove('error-highlight');
						}, 2000);
					}
				});
			}
		}
	}
</script>

<style>
	/* 全局样式 */
	.container {
		height: 100vh;
		background: #f5f7fa;
		overflow: hidden;
		max-width: 750rpx;
		margin: 0 auto;
	}
input{
	padding: 0 15px !important;
}
	.top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: white;
		border-bottom: 1px solid #eee;
	}
	
	.top-bar .title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}
	
	.right-icons {
		display: flex;
		gap: 20rpx;
	}

	.welcome-page {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #ffa500, #007bff);
	}

	.welcome-content {
		text-align: center;
		color: white;
		padding: 40rpx;
	}

	.welcome-logo {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 40rpx;
	}

	.welcome-title {
		font-size: 48rpx;
		margin-bottom: 20rpx;
		font-weight: bold;
	}

	.welcome-desc {
		font-size: 30rpx;
		margin-bottom: 60rpx;
		opacity: 0.9;
	}

	.start-btn {
		background: rgba(255, 255, 255, 0.2);
		color: white;
		border: 1px solid rgba(255, 255, 255, 0.3);
		padding: 24rpx 60rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
		transition: all 0.3s ease;
	}
	
	.start-btn:active {
		background: rgba(255, 255, 255, 0.3);
		transform: scale(0.98);
	}

	/* 进度指示器 */
	.progress-indicator.new-style {
		padding: 15rpx 30rpx;
		background: white;
		border-bottom: 1px solid #eee;
	}
	
	.progress-indicator.new-style .step-labels {
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 2;
	}
	
	.progress-indicator.new-style .step-label {
		font-size: 26rpx;
		color: #999;
		position: relative;
		padding-bottom: 15rpx;
	}
	
	.progress-indicator.new-style .step-label::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: #ddd;
		transition: all 0.3s ease;
	}
	
	.progress-indicator.new-style .step-label.active {
		color: #6e8efb;
	}
	
	.progress-indicator.new-style .step-label.active::after {
		background-color: #6e8efb;
		width: 16rpx;
		height: 16rpx;
	}
	
	.progress-indicator.new-style .step-label.completed {
		color: #6e8efb;
	}
	
	.progress-indicator.new-style .step-label.completed::after {
		background-color: #6e8efb;
	}
	
	.progress-indicator.new-style .step-dividers {
		display: flex;
		justify-content: space-between;
		position: relative;
		top: -5rpx;
	}
	
	.progress-indicator.new-style .divider {
		flex: 1;
		height: 2rpx;
		background-color: #ddd;
		transition: all 0.3s ease;
	}
	
	.progress-indicator.new-style .divider.completed {
		background-color: #6e8efb;
	}

	.form-content {
		flex: 1;
		padding: 20rpx 30rpx;
		height: calc(100vh - 360rpx);
	}

	.form-step {
		margin-bottom: 30rpx;
	}

	.step-header {
		margin-bottom: 30rpx;
		text-align: center;
	}

	.step-header h2 {
		font-size: 36rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.step-header p {
		color: #666;
		font-size: 26rpx;
	}

	.form-group {
		margin-bottom: 40rpx;
	}

	.form-group label {
		display: block;
		margin-bottom: 10rpx;
		font-weight: 500;
		color: #333;
		font-size: 28rpx;
	}

	.required {
		color: #ff4d4f;
	}

	/* 修复输入框样式 - 重点修改部分 */
	.form-group input {
		width: 100%;
		padding: 24rpx 25rpx; /* 增加上下内边距 */
		border: 1px solid #ddd;
		border-radius: 10rpx;
		font-size: 28rpx;
		line-height: 1.5; /* 确保行高足够 */
		height: 88rpx; /* 固定高度 */
		box-sizing: border-box;
		background: white;
		transition: border-color 0.3s ease;
	}

	/* 修复文本域样式 */
	.learning-goal-textarea {
		width: 100%;
		padding: 20rpx 25rpx;
		border: 1px solid #ddd;
		border-radius: 10rpx;
		font-size: 28rpx;
		line-height: 1.5;
		min-height: 160rpx;
		box-sizing: border-box;
		background: white;
	}

	/* 修复标签输入框内的输入框 */
	.course-input {
		width: 100%;
		padding: 20rpx 0; /* 调整内边距 */
		border: none !important;
		font-size: 28rpx;
		line-height: 1.5;
		height: 60rpx;
		background: transparent;
	}

	.form-group input.error,
	.learning-goal-textarea.error,
	.picker.error {
		border-color: #ff4d4f;
		animation: shake 0.5s;
	}
	
	.error-highlight {
		animation: highlight 1s infinite alternate;
	}
	
	@keyframes shake {
		0%, 100% { transform: translateX(0); }
		10%, 30%, 50%, 70%, 90% { transform: translateX(-5rpx); }
		20%, 40%, 60%, 80% { transform: translateX(5rpx); }
	}
	
	@keyframes highlight {
		from { box-shadow: 0 0 0 2rpx rgba(255, 77, 79, 0.2); }
		to { box-shadow: 0 0 0 4rpx rgba(255, 77, 79, 0.4); }
	}

	.error-msg {
		color: #ff4d4f;
		font-size: 24rpx;
		margin-top: 5rpx;
		display: block;
	}

	.hint-text {
		color: #999;
		font-size: 24rpx;
		margin-top: 5rpx;
		display: block;
	}

	.char-count {
		color: #999;
		font-size: 24rpx;
		text-align: right;
		display: block;
		margin-top: 5rpx;
	}

	/* 标签输入样式 */
	.tags-input {
		border: 1px solid #ddd;
		border-radius: 8rpx;
		padding: 20rpx; /* 增加内边距 */
		transition: border-color 0.3s ease;
		box-sizing: border-box;
		background: white;
		min-height: 140rpx;
	}

	.tags-input.error {
		border-color: #ff4d4f;
	}

	.selected-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8rpx;
		margin-bottom: 15rpx;
	}

	.tag {
		background: #e6eeff;
		color: #6e8efb;
		padding: 8rpx 16rpx;
		border-radius: 12rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		gap: 5rpx;
		transition: all 0.2s ease;
	}
	
	.tag:active {
		transform: scale(0.95);
	}

	/* 复选框组样式 */
	.checkbox-group {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.checkbox-item {
		display: flex;
		align-items: center;
	}

	.checkbox-label {
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 26rpx;
		cursor: pointer;
	}

	/* 偏好网格样式 */
	.preference-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15rpx;
	}

	.preference-item {
		border: 2rpx solid #e6eeff;
		border-radius: 8rpx;
		padding: 15rpx;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.preference-item.selected {
		background: #6e8efb;
		border-color: #6e8efb;
		color: white;
		transform: translateY(-3rpx);
		box-shadow: 0 4rpx 12rpx rgba(110, 142, 251, 0.3);
	}

	.preference-label {
		display: block;
		font-weight: 500;
		margin: 8rpx 0 4rpx;
	}

	.preference-desc {
		font-size: 22rpx;
		opacity: 0.8;
	}

	/* 时间段选择样式 */
	.time-slots {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10rpx;
	}

	.time-slot {
		border: 1rpx solid #ddd;
		border-radius: 6rpx;
		padding: 10rpx;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.time-slot.selected {
		background: #e6eeff;
		border-color: #6e8efb;
		color: #6e8efb;
		transform: scale(1.02);
	}

	/* 导航按钮 */
	.form-nav.new-style {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		max-width: 750rpx;
		margin: 0 auto;
		padding: 25rpx 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		background: white;
	}

	.nav-btn {
		flex: 1;
		padding: 22rpx;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 500;
		transition: all 0.3s ease;
	}
	
	.nav-btn.primary {
		background: linear-gradient(90deg, #6e8efb, #a777e3);
		color: white;
		border: none;
	}
	
	.nav-btn.primary:active {
		opacity: 0.9;
		transform: scale(0.98);
	}

	.nav-btn.prev {
		background: #f5f7fa;
		color: #666;
		border: 1rpx solid #ddd;
	}
	
	.nav-btn.prev:active {
		background: #e8eaed;
		transform: scale(0.98);
	}

	/* 性别选择选项样式 */
	.gender-options.new-style {
		display: flex;
		gap: 20rpx;
		margin-bottom: 10rpx;
	}

	.gender-options.new-style .gender-option {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		border: 2rpx solid #ddd;
		border-radius: 10rpx;
		background: white;
		cursor: pointer;
		transition: all 0.3s ease;
		font-size: 30rpx;
	}

	.gender-options.new-style .gender-option.selected {
		background: #e6eeff;
		border-color: #6e8efb;
		color: #6e8efb;
		font-weight: 500;
	}

	.gender-options.new-style .gender-option:not(.selected):active {
		background: #f5f5f5;
	}

	/* 修复选择器样式 */
	.picker {
		padding: 24rpx 25rpx; /* 增加内边距 */
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		background: white;
		font-size: 28rpx;
		line-height: 1.5; /* 确保行高足够 */
		min-height: 88rpx; /* 固定高度 */
		display: flex;
		align-items: center; /* 垂直居中文字 */
		transition: border-color 0.3s ease;
		box-sizing: border-box;
	}

	.picker.placeholder {
		color: #999;
	}

	/* 确保placeholder文字正常显示 */
	.form-group input::placeholder,
	.learning-goal-textarea::placeholder,
	.course-input::placeholder {
		color: #999;
		font-size: 28rpx;
		line-height: 1.5;
		opacity: 1; /* 确保在微信小程序中placeholder正常显示 */
	}
</style>